/**
 * 实时榜单
 * @author Jim
 * @date 2020/02/22
 * @update 2020/02/22
 */
import React, {PureComponent} from 'react';
import {
  FlatList,
  Image,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Axios from 'axios';
import ShopCard from '../../components/ShopCard';
import {ActivityIndicator, Icon} from '@ant-design/react-native';
import {sales_list} from '../../api/haoDan';
import Header from '../../components/Header';
const default_state = {
  list: [],
  list_page: 1,
  list_loading: false,
  list_error: false,
  list_end: false,
};

export default class List extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ...default_state,
      sort: 'new',
    };
  }

  componentDidMount() {
    this.GetData();
  }

  getSaleType(sort) {
    switch (sort) {
      case 'new':
        return 1;
      case 'date_time':
        return 2;
      case 'total_sale_num_desc':
        return 3;
      case 'price_desc':
        return 4;
      default:
        return 1;
    }
  }

  /**
   * 获取数据
   */
  GetData() {
    const {sort, list, list_loading, list_end, list_page} = this.state;
    if (list_loading && list_end) {
      return;
    }
    this.setState(
      {
        list_loading: true,
        list_error: false,
        list_end: false,
      },
      () => {
        sales_list(this.getSaleType(sort), list_page).then((res) => {
          this.setState({
            list_loading: false,
            list: list.concat(res.data),
            list_page: res.min_id,
          });
        });
      },
    );
  }

  /**
   * 切换分类
   */
  ChangeSort(sort) {
    this.setState(
      {
        ...default_state,
        sort,
        list_page: 1,
        list: [],
      },
      () => this.GetData(),
    );
  }

  render() {
    const {sort, list, list_end, list_error} = this.state;
    return (
      <View style={styles.container}>
        <Header title={'各大榜单'} search />
        <View style={styles.sort}>
          <TouchableOpacity
            activeOpacity={1}
            style={styles.sort_item}
            onPress={() => this.ChangeSort('new')}>
            <Text
              style={[
                styles.sort_item_text,
                sort === 'new' && {color: 'red', fontWeight: 'bold'},
              ]}>
              实时销量榜
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={1}
            style={styles.sort_item}
            onPress={() => this.ChangeSort('date_time')}>
            <Text
              style={[
                styles.sort_item_text,
                sort === 'date_time' && {color: 'red', fontWeight: 'bold'},
              ]}>
              今日爆单榜
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={1}
            style={styles.sort_item}
            onPress={() => this.ChangeSort('price_desc')}>
            <Text
              style={[
                styles.sort_item_text,
                sort === 'price_desc' && {
                  color: 'red',
                  fontWeight: 'bold',
                },
              ]}>
              昨日爆单榜
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={1}
            style={styles.sort_item}
            onPress={() => this.ChangeSort('total_sale_num_desc')}>
            <Text
              style={[
                styles.sort_item_text,
                sort === 'total_sale_num_desc' && {
                  color: 'red',
                  fontWeight: 'bold',
                },
              ]}>
              今日热搜榜
            </Text>
          </TouchableOpacity>
        </View>
        <FlatList
          onEndReached={() => !list_end && !list_error && this.GetData()}
          onEndReachedThreshold={0.2}
          data={list}
          keyExtractor={(item) => item.productId}
          numColumns={2}
          renderItem={(item) => <ShopCard item={item} />}
          ListFooterComponent={
            list_end ? (
              <Text style={styles.list_footer}>已经到底了~</Text>
            ) : list_error ? (
              <Text style={styles.list_footer}>网络有点问题~</Text>
            ) : (
              <View style={{height: 30, justifyContent: 'center'}}>
                <ActivityIndicator color={'#F55C6E'} text={'加载中'} />
              </View>
            )
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F4F4F4',
  },
  header: {
    height: 36,
    flexDirection: 'row',
    marginTop: StatusBar.currentHeight + 5,
    marginBottom: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header_back: {
    marginLeft: 15,
    marginRight: 5,
  },
  header_body: {
    flex: 1,
    height: 36,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 5,
    marginRight: 10,
  },
  header_body_text: {
    flex: 1,
    fontSize: 18,
    fontWeight: 'bold',
    paddingLeft: 10,
  },
  header_search: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 15,
  },
  header_search_icon: {
    width: 24,
    height: 24,
    tintColor: '#000',
  },
  sort: {
    zIndex: 10,
    flexDirection: 'row',
    backgroundColor: '#fff',
  },
  sort_item: {
    flex: 1,
    flexDirection: 'row',
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  sort_item_text: {
    color: '#000',
  },
});
